import {ScrollView, View} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect} from "react"
import {useDidHide, useDidShow, useRouter, useUnload} from "@tarojs/taro"
import WarningRaw from "./components"
import {WarningStore} from "./model"
import {DatePickerRow} from "@/components/date"

const Warning: React.FC = (): JSX.Element => {
	let router = useRouter()

	const {
		updatePageQuery,
		getPageData,
		warningList,
		changeDateRange,
		canUpDate,
		addPage,
		initPageData
	} = useContext(WarningStore)

	// 可以使用所有的 React Hooks
	// useEffect(() => {
	//   console.log('Warning useEffect')
	// })

	// 对应 onShow
	useDidShow(() => {
		updatePageQuery(router.params)
		console.log("Warning useDidShow")
		//获取路由
	})

	// 对应 onHide
	useDidHide(() => {
		console.log("Warning useDidHide")
	})
	useUnload(() => {
		initPageData()
	})
	return (
		<View className="h-screen bg-xx_bg pt-12 overflow-y-auto flex flex-col">
			<DatePickerRow
				changeDateRange={(s, e) => {
					setTimeout(() => {
						changeDateRange(s, e)
					})
				}}
			></DatePickerRow>

			<ScrollView
				className="flex-1 overflow-y-auto pb-24"
				scrollY={true}
				lower-threshold="200"
				onScrollToLower={() => {
					canUpDate &&
						addPage(() => {
							getPageData()
						})
				}}
			>
				{warningList.map(item => (
					<WarningRaw warning={item}></WarningRaw>
				))}

				{canUpDate && !warningList.length ? (
					<View className="text-12 px-16 my-12 text-center">暂无报警信息~</View>
				) : null}
			</ScrollView>
		</View>
	)
}
export default observer(Warning)
